<template>
  <group-layout title="文字内容编辑">
    <a-row :gutter="10" class="edit-group" v-if="configList.length>0">
        <a-col :span="5" class="edit-label">变量名</a-col>
        <a-col :span="19">
          <a-select size="small" style="width: 100%"
                    :getPopupContainer="trigger => trigger.parentNode"
                    v-model="editLayer.field"
                    @change="handleFieldChange"
          >
              <a-select-option v-for="(config,index) in configList" :value="config.field" :key="index">
                {{ config.name }}
              </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="19" :offset="5" v-if="'tip' in conf">
          <p class="input-tip" style="text-align: left">
            {{conf.tip}}
          </p>
        </a-col>
    </a-row>
    <a-row :gutter="10" class="edit-group" v-if="editLayer.useField && editLayer.field !== 'userName'">
      <a-col :span="5" class="edit-label">{{conf.placeholder}}</a-col>
      <a-col :span="19">
        <a-input size="small" v-model="editLayer.fieldContent"
                 placeholder="请输入"
                 @change="handleFieldContentChange"
        />
      </a-col>
    </a-row>
    <a-row :gutter="10" class="edit-group" v-if="!editLayer.useField">
      <a-col :span="5" class="edit-label">内容</a-col>
      <a-col :span="19">
        <a-textarea size="small" v-model="editLayer.content" placeholder="请输入文字内容"/>
      </a-col>
    </a-row>
  </group-layout>
</template>


<script>
  import textDescription from './desc'
  import GroupLayout from '../../group/GroupLayout'
  import {layerMixins} from '../../../mixins/layerMixins'
  import {useDataAdapter} from '../../../model/dataAdapter'
  export default {
    name: 'editor-text',
    mixins: [layerMixins],
    components: {GroupLayout},
    data () {
      return {
        configList: textDescription.configList.filter(item => item.show)
      }
    },
    computed: {
      conf () {
        return this.configList.find(item => item.field === this.editLayer.field)
      }
    },
    methods: {
      handleFieldChange (val) {
        if (val === '') {
          this.editLayer.useField = false
          this.editLayer.fieldContent = ''
          this.editLayer.content = ''
          return
        }
        this.editLayer.useField = true

        if (val === 'userName') {
          this.handleFieldContentChange()
          this.editLayer.linkType = 'goLogin'
        } else {
          if (this.editLayer.fieldContent !== '') {
            this.handleFieldContentChange()
          }
        }
      },
      handleFieldContentChange () {
        const render = useDataAdapter(this).layerRender
        render(
          {
            floor: this.editFloor,
            layer: this.editLayer,
            callBack: () => {}
          }
        )
      }
    }
  }

</script>

<style scoped lang="scss">
@import "../../../style/editor";
</style>
